<template>
  <div class="info">
    <h1>测温报告</h1>
    <el-row>
      <el-col :span="20"
              :push="2">
        <div class="block">
          <span class="demonstration">日期：</span>
          <el-date-picker v-model="reportDate"
                          type="date"
                          format="yyyy-MM-dd"
                          placeholder="选择日期"
                          @change="handlePickerChange">
          </el-date-picker>
        </div>
        <div class="table">
          <el-table :data="tableData"
                    border
                    style="width: 100%">
            <el-table-column label="姓名"
                             align="center"
                             width="140">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="学号"
                             align="center"
                             width="140">
              <template slot-scope="scope">
                <span>{{ scope.row.sno }}</span>
              </template>
            </el-table-column>
            <el-table-column label="班级"
                             align="center"
                             width="140">
              <template slot-scope="scope">
                <span>{{ scope.row.classes }}</span>
              </template>
            </el-table-column>
            <el-table-column label="学校"
                             align="center"
                             width="140">
              <template slot-scope="scope">
                <span>{{ scope.row.school }}</span>
              </template>
            </el-table-column>
            <el-table-column label="测温时间"
                             align="center"
                             width="220">
              <template slot-scope="scope">
                <span>{{ scope.row.time | moment }}</span>
              </template>
            </el-table-column>
            <el-table-column label="最近体温"
                             align="center"
                             width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.temperature }}</span>
              </template>
            </el-table-column>
            <el-table-column label="体温走势"
                             fixed="right">
              <template slot-scope="scope">
                <el-button size="mini"
                           @click="handleChart(scope.$index, scope.row)">曲线</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <UserTemperature :dialogChart.sync="dialogChart"></UserTemperature>
  </div>
</template>

<script>
import UserTemperature from './UserTemperature.vue'
import moment from 'moment'
import axios from '../axios.js'
import store from '../store'
export default {
  name: 'Report',
  components: {
    UserTemperature,
  },
  data () {
    return {
      tableData: [],
      dialogChart: {
        show: false,
        student_id: "",
        name: "",
      },
      reportDate: new Date(moment(new Date()).format('YYYY-MM-DD 00:00:00')),
    }
  },
  methods: {
    getReport () {
      let date = null;
      if (this.reportDate) {
        date = this.reportDate.toISOString();
      }
      axios.getReportInfo(store.state.username, date).then((res) => {
        console.log(res)
        if (res.data.status == 0) {
          this.tableData = res.data.data
        }
      })
    },
    handlePickerChange (value) {
      console.log(value)
      this.getReport()
    },
    handleChart (index, row) {
      this.dialogChart.student_id = row.student_id
      this.dialogChart.name = row.name
      this.dialogChart.show = true
      console.log(row)
    },
  },
  created () {
    this.getReport()
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  font-size: 30px;
  color: #333;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 5px;
  border-bottom: 2px solid #409eff;
  width: 220px;
}

.block {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
